<template>
  <div v-if="props.res">
    <div v-for="(promotion, promotion_index) in props.res.promotionMap" :key="promotion_index">
      <div class="showBox" v-if="promotion.__key == 'SECKILL' ||
    promotion.__key == 'GROUPBUY' ||
    promotion.__key == 'PINTUAN'
    ">
        <view class="group-wrapper">
          <div class="u-group-row">
            <view :span="8" class="showBox_L">
              <view class="u-group-flex">
                <!-- 限时抢购 -->
                <view class="u-group-flex-left" v-if="promotion.__key == 'SECKILL'">
                  <span class="u-group-flex-left-span" v-if="props.res.data.promotionPrice != undefined">

                    <span class="flex-price">
                      {{ unitPrice(props.res.data.promotionPrice, '￥') }}</span>
                  </span>
                  <view class="u-group-flex" v-if="props.res.data.price != undefined">
                    <span class="old-price">{{ unitPrice(props.res.data.price, '￥')
                      }}</span>
                    <view class="promotion">限时抢购</view>
                  </view>
                </view>

                <!-- 团购 -->
                <view class="u-group-flex-left" v-if="promotion.__key == 'GROUPBUY'">
                  <span class="u-group-flex-left-span">
                    <span class="flex-price" v-if="promotion.groupbuy_goods_vo.price != undefined">{{
    unitPrice(promotion.groupbuy_goods_vo.price, '￥') }}</span>
                    <!-- <span v-if="promotion.point">+{{promotion.point}}积分</span> -->
                  </span>
                  <view class="u-group-flex">
                    <span class="old-price" v-if="promotion.groupbuy_goods_vo.original_price != undefined">
                      {{ unitPrice(promotion.groupbuy_goods_vo.original_price, '￥') }}</span>
                    <view class="promotion">团购活动</view>
                  </view>
                </view>

                <view class="u-group-flex-left" v-if="promotion.__key == 'PINTUAN'">
                  <span class="u-group-flex-left-span" v-if="props.res.data.promotionPrice != undefined">
                    <span class="flex-price">
                      {{ unitPrice(props.res.data.promotionPrice, '￥') }}
                    </span>
                  </span>
                  <view class="u-group-flex" v-if="props.res.data.price != undefined">
                    <span class="old-price">￥{{ props.res.data.price }}</span>
                    <view class="promotion">拼团活动</view>
                  </view>
                </view>
                <!--  拼团右侧 -->
                <view class="u-group-flex-right" v-if="promotion.__key == 'PINTUAN'">
                  <span class="group-bag">{{ promotion.requiredNum }}人拼团 </span>
                  <span class="group-bag">限购{{ promotion.limitNum }}件</span>
                </view>
              </view>
            </view>
            <view class="showBox_R" v-if="promotion && promotion.endTime">
              <nut-tag :custom-color="colors.themeColor" size="mini">{{ getIsTimer(promotion) }}</nut-tag>
              <nut-countdown v-model="resetTime" :end-time="getCountDownTime(promotion.endTime)">
                <div w-full flex flex-a-c flex-j-c mt-10rpx>
                  <div color-white px-4rpx bg-main-color rounded>{{ resetTime.d }}</div>
                  <span>:</span>
                  <div color-white px-4rpx bg-main-color rounded>{{ resetTime.h }}</div>
                  <span>:</span>
                  <div color-white px-4rpx bg-main-color rounded>{{ resetTime.m }}</div>
                  <span>:</span>
                  <div color-white px-4rpx bg-main-color rounded>{{ resetTime.s }}</div>
                </div>
              </nut-countdown>
              <!-- <u-count-down :hide-zero-day="true" font-size="25" color="#fff" :bg-color="colors.themeColor"
                separator-size="25" :separator-color="colors.themeColor" :show-hours="true" :show-minutes="true"
                :timestamp="getCountDownTime(promotion.endTime)"></u-count-down> -->
            </view>
          </div>
        </view>
      </div>
    </div>

  </div>
</template>

<script setup lang="ts">
import { unitPrice } from '@/utils/filters';
import { colors } from '@/constants/injection-key'
const props = defineProps<{
  res: any,
}>()

watch(() => props.res, (val) => {
  if (val && val.promotionMap.length != 0) {
    Object.keys(val.promotionMap).forEach((item) => {
      let key = item.split("-")[0];
      val.promotionMap[item].__key = key;
    });
  }
}, {
  immediate: true
})

const startTimer = ref<boolean>(false)
const resetTime = ref<any>({})
// 倒计时
const getCountDownTime = (val: string) => {

  let date = new Date(val);
  let timeSimple = new Date(date).getTime();

  return timeSimple
}


const getIsTimer = (val: any) => {
  var timestamp = new Date().getTime();
  if (timestamp < val.start_time) {
    startTimer.value = true;
    return "距离活动开始";
  } else {
    return "距离活动结束";
  }
}
</script>

<style scoped lang="scss">
.group-wrapper {
  background: url("/static/exchange.png");
  background-size: cover;
}

.u-group-row {
  width: 100%;
  padding: 0 32rpx;
  display: flex;
  height: 100rpx;
  align-items: center;
  justify-content: space-between;
}

.showBox_L {

  height: 100%;
  color: #fff;
  flex: 2;
}

.flex-price {
  color: #fff;
  font-size: 48rpx;
}

.u-group-flex-left {
  display: flex;
  flex-direction: column;
}

.u-group-flex-left-span {
  line-height: 1.2;
  font-size: 32rpx;
}

.showBox_R {
  flex: 1;
  height: 100%;
  padding: 4rpx 0 !important;
  background: #ffe7e6 !important;
  text-align: center !important;
}


.u-group-flex {
  height: 100%;
  align-items: center;
  justify-content: space-between;
}

.u-group-flex,
.u-group-flex-right {
  display: flex;
}

.u-group-flex-right {
  height: 100%;
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.old-price {
  color: #fff;
  text-decoration: line-through;
  font-size: 22rpx;
  opacity: 0.8;
}

.u-group-flex-left {
  height: 100%;
}

.group-bag {
  font-size: 20rpx;
  padding: 4rpx 20rpx;
  border-radius: 6rpx;
  margin-right: 20rpx;
}

.promotion {
  font-size: 22rpx;
  border: 2rpx solid $main-color;
  padding: 2rpx 6rpx;
  margin-left: 10rpx;
  line-height: 1;
}
</style>
